
<!--Created by haozhou on 2017/4/5.
-->
<page-container>
  <page-summary-box>
    <page-summary-item text="所在集群"><span ng-bind="loadBalanceDraft.clusterName"></span></page-summary-item>
    <page-summary-item text="namespace"><span ng-bind="loadBalanceDraft.namespace"></span></page-summary-item>
    <page-summary-item text="上次升级时间"><span ng-bind="loadBalanceDraft.lastUpdateTime | time"></span></page-summary-item>
    <page-summary-item text="实例个数"><span ng-bind="loadBalanceDraft.nginxDraft.currentReplicas"></span></page-summary-item>
    <page-summary-item text="当前版本"><span ng-if="!loadBalanceDraft.nginxDraft.currentVersions||loadBalanceDraft.nginxDraft.currentVersions===0">无</span><span ng-repeat="version in loadBalanceDraft.nginxDraft.currentVersions" ng-cloak="ng-cloak">version{{version.version}}</span></page-summary-item>
    <page-summary-item text="状态"><span ng-class="({'RUNNING': 'txt-success', 'STOP': 'txt-error', 'DEPLOYING': 'txt-primary', 'ERROR': 'txt-warning', 'STOPPING': 'txt-primary', 'UPDATING': 'txt-primary', 'BACKROLLING': 'txt-primary', 'UPSCALING': 'txt-primary', 'DOWNSCALING': 'txt-primary', 'ABORTING': 'txt-warning', 'BACKROLL_ABORTED': 'txt-warning', 'UPDATE_ABORTED': 'txt-warning'}[loadBalanceDraft.state])" ng-bind="({'RUNNING': '运行中', 'STOP': '停止', 'DEPLOYING': '部署中', 'ERROR': '异常', 'STOPPING': '停止中', 'UPDATING': '升级中', 'BACKROLLING': '回滚中', 'UPSCALING': '扩容中', 'DOWNSCALING': '缩容中', 'ABORTING': '中断中', 'BACKROLL_ABORTED': '回滚已中断', 'UPDATE_ABORTED': '升级已中断'}[loadBalanceDraft.state])"></span></page-summary-item>
    <page-summary-content ng-if="hasUpdatePermission"><span ng-if="loadBalanceDraft.state === 'STOP'">
        <button type="button" ng-disabled="isWaitingStart" ng-click="start()">启动</button>
        <button class="dome-tool-align" type="button" ng-if="hasDeletePermission" ng-click="delete()">删除</button></span><span ng-if="loadBalanceDraft.state === 'RUNNING'">
        <button type="button" ng-disabled="isWaitingUpVersion" ng-click="updateVersion()">升级/回滚</button>
        <button class="dome-tool-align" type="button" ng-disabled="isWaitingScale" ng-click="scaleVersion()">扩容/缩容</button>
        <button class="dome-tool-align" type="button" ng-disabled="isWaitingStop" ng-click="stopVersion()">停止</button></span><span ng-if="loadBalanceDraft.state === 'ERROR' || loadBalanceDraft.state === 'BACKROLL_ABORTED' || loadBalanceDraft.state === 'UPDATE_ABORTED'">
        <button type="button" ng-disabled="isWaitingRecover" ng-click="recover()">恢复</button>
        <button class="dome-tool-align" type="button" ng-disabled="isWaitingStop" ng-click="stopVersion()">停止</button></span><span ng-if="loadBalanceDraft.state === 'DEPLOYING' || loadBalanceDraft.state === 'UPDATING' || loadBalanceDraft.state === 'BACKROLLING' || loadBalanceDraft.state === 'UPSCALING' || loadBalanceDraft.state === 'DOWNSCALING'">
        <button type="button" ng-disabled="isWaitingStop" ng-click="stopVersion()">停止</button></span></page-summary-content>
  </page-summary-box>
  <page-content-box tabs="[
    { text: &quot;转发规则&quot;, page: &quot;&quot;, html: 'nginxRule.html' },
    { text: &quot;配置详情&quot;, page: &quot;detail&quot;, lazy: false, html: 'detail.html' },
    { text: &quot;升级&quot;, page: &quot;update&quot;, lazy: false, html: 'update.html' },
    { text: &quot;事件&quot;, page: &quot;event&quot;, html: 'event.html' },
    { text: &quot;实例&quot;, page: &quot;instance&quot;, html: 'instance.html' },
    ]"></page-content-box>
</page-container>
<script type="text/ng-template" id="nginxRule.html">
  <loading ng-if="isUpdating"></loading>
  <form-container left-column-width="60px" ng-if="!isEditingRule">
    <form name="nginxRule">
      <div ng-if="hasUpdatePermission">
        <button type="button" ng-if="!isEditingRule" ng-click="toggleEdit('edit')">编辑</button>
      </div>
      <div class="txt-prompt" style="margin-top:20px;line-height: 1.42857143; color: #aaa;"><i class="fa fa-info-circle">&nbsp;</i><span>Gdocker提供的默认nginx镜像使用max_fails和fail_timeout实现健康检查，默认值为max_fails=1，fail_timeout=10s。以下情况健康检查失败：连接实例错误或超时，实例无响应，实例返回的HTTP状态码为500、502、503或504。</span></div>
      <form-config-group>
        <form-config-item config-title="转发规则">
          <form-input-container><span ng-if="!loadBalanceForRule.nginxDraft.rules || loadBalanceForRule.nginxDraft.rules.length === 0">未设置</span>
            <sub-form-container ng-repeat="rule in loadBalanceForRule.nginxDraft.rules" left-column-width="60px">
              <form-config-group>
                <form-config-item config-title="服务域名">
                  <form-input-container>
                    <div ng-bind="rule.domain || '未设置'"></div>
                  </form-input-container>
                </form-config-item>
                <form-config-item>
                  <form-input-container>
                    <div style="display: inline-block; margin-right: 20px;"><span>部署名称：</span><a class="txt-bright" ui-sref="deployDetail({id: rule.deployId, collectionId: 0, collectionName: 'all-deploy'})" ng-bind="rule.deployName" tooltip="部署详情"></a></div>
                    <div style="display: inline-block;margin-right: 20px;"><span>状态：</span><span ng-bind="({'RUNNING': '运行中', 'STOP': '停止', 'DEPLOYING': '部署中', 'ERROR': '异常', 'AB_TEST': '灰度发布', 'STOPPING': '停止中', 'UPDATING': '升级中', 'BACKROLLING': '回滚中', 'UPSCALING': '扩容中', 'DOWNSCALING': '缩容中', 'ABORTING': '中断中', 'BACKROLL_ABORTED': '回滚已中断', 'UPDATE_ABORTED': '升级已中断', 'DELETED': '已删除'}[rule.deployStatus])"></span></div>
                    <div style="display: inline-block;"><span>程序服务端口：</span><span ng-bind="rule.servicePort"></span></div>
                  </form-input-container>
                </form-config-item>
              </form-config-group>
            </sub-form-container>
          </form-input-container>
        </form-config-item>
      </form-config-group>
    </form>
  </form-container>
  <form-container left-column-width="60px" ng-if="isEditingRule">
    <form name="nginxRule">
      <div ng-if="hasUpdatePermission">
        <button type="button" ng-click="toggleEdit('cancel')">取消</button>
      </div>
      <div class="txt-prompt" style="margin-top:20px; line-height: 1.42857143; color: #aaa;"><i class="fa fa-info-circle">&nbsp;</i><span>Gdocker提供的默认nginx镜像使用max_fails和fail_timeout实现健康检查，默认值为max_fails=1，fail_timeout=10s。以下情况健康检查失败：连接实例错误或超时，实例无响应，实例返回的HTTP状态码为500、502、503或504。</span></div>
      <form-config-group>
        <form-config-item config-title="转发规则">
          <form-input-container ng-if="isEditingRule" help-text="根据服务域名将请求转发到不同的部署实例。只能关联相同集群、相同namespace且运行中的创建了对内服务的部署(用户在老版本的Gdocker中创建的对外服务类型的部署，也可以在此进行关联)。">
            <lb-nginx-rule ng-model="loadBalanceForRule.nginxDraft.rules" form-name="nginxRule" parameters="{clusterId:loadBalanceForRule.clusterId,namespace:loadBalanceForRule.namespace,loadBalanceType:loadBalanceForRule.type}"></lb-nginx-rule>
          </form-input-container>
          <form-input-container ng-if="isEditingRule">
            <form-submit-button form="nginxRule" on-submit="updateLoadBalanceRule()" is-waiting="isUpdating">保存</form-submit-button>
          </form-input-container>
        </form-config-item>
      </form-config-group>
    </form>
  </form-container>
</script>
<script type="text/ng-template" id="detail.html">
  <loading ng-if="isLoading"></loading>
  <form>
    <form-container class="clear-margin" left-column-width="60px" margin-top="0px">
      <form-config-group>
        <form-config-item config-title="版本选择">
          <form-multiple-inline>
            <form-multiple-inline-item style="flex-basis:190px;flex-grow:0;">
              <form-select ng-model="currentVersion" name="versionSelector" on-change="toggleVersion(currentVersion)" options="versionList" show-search-input="never" placeholder="请选择版本" is-loading="isLoadingVersionList" loading-text="正在获取版本信息" empty-text="无相关信息" required="true"></form-select>
            </form-multiple-inline-item>
            <form-multiple-inline-item></form-multiple-inline-item>
          </form-multiple-inline>
        </form-config-item>
        <form-config-item config-title="工作场景">
          <form-input-container><span ng-bind="nginxVersionDraft.hostEnv === 'TEST' ? '测试环境' : '生产环境'"></span></form-input-container>
        </form-config-item>
        <form-config-item config-title="所在主机">
          <form-input-container><span ng-bind="nginxVersionDraft.externalIPs.toString() || '无'"></span></form-input-container>
        </form-config-item>
        <form-config-item config-title="监听端口">
          <form-input-container><span ng-bind="nginxVersionDraft.listenPort"></span></form-input-container>
        </form-config-item>
        <form-config-item config-title="镜像信息">
          <form-input-container><span ng-bind="nginxVersionDraft.registry + '/'"></span><span ng-bind="nginxVersionDraft.image + ':'"></span><span ng-bind="nginxVersionDraft.tag"></span></form-input-container>
        </form-config-item>
        <form-config-item config-title="资源限额">
          <form-input-container><span style="margin-right: 30px;">CPU：{{nginxVersionDraft.cpu || 0}}个</span><span>内存：{{nginxVersionDraft.mem || 0}}MB</span></form-input-container>
        </form-config-item>
        <form-config-item config-title="日志存储">
          <form-input-container><span>存储类型：</span><span style="margin-right: 30px;" ng-bind="({'EMPTYDIR': '不存储日志', 'HOSTPATH': '主机目录'}[nginxVersionDraft.volumeDraft.volumeType])"></span><span ng-if="nginxVersionDraft.volumeDraft.volumeType === 'HOSTPATH'" ng-bind="'主机目录：' + nginxVersionDraft.volumeDraft.hostPath"></span></form-input-container>
        </form-config-item>
        <form-config-item config-title="负载策略">
          <form-input-container><span ng-bind="({'ROUNDROBIN': 'round_robin', 'IPHASH': 'ip_hash', 'LEASTCONN': 'least_conn'}[nginxVersionDraft.lbMethod])"></span></form-input-container>
        </form-config-item>
        <form-config-item config-title="描述">
          <form-input-container>
            <!--span(ng-bind="loadBalanceDraft.description || '无描述信息'")-->
            <div style="display: inline-block;"><span ng-if="!isEditDesc" ng-bind="loadBalanceForRule.description || '无描述信息'"></span>
              <textarea class="ui-input-fill" ng-if="isEditDesc" ng-model="editDescription.text" style="width: 450px; resize: vertical;"></textarea>
            </div>
            <div ng-if="hasUpdatePermission" style="margin-left: 10px; display: inline-block;">
              <icon-edit ng-if="!isEditDesc" ng-click="toggleIsEditDesc()" tooltip="修改" style="padding:0 5px !important; cursor: pointer;"></icon-edit>
              <icon-save ng-if="isEditDesc" ng-click="updateLoadBalanceDesc()" tooltip="保存" style="padding:0 5px !important; cursor: pointer;"></icon-save>
              <icon-cancel ng-if="isEditDesc" ng-click="toggleIsEditDesc()" tooltip="取消" style="padding:0 5px !important; cursor: pointer;"></icon-cancel>
            </div>
          </form-input-container>
        </form-config-item>
      </form-config-group>
    </form-container>
  </form>
</script>
<script type="text/ng-template" id="update.html">
  <form name="updateNginxLBVersion">
    <form-container class="clear-margin" left-column-width="60px" margin-top="0px">
      <loading ng-if="isCreating"></loading>
      <form-config-group>
        <form-config-item config-title="工作场景" required="required">
          <form-input-container><span ng-bind="({'TEST': '测试环境', 'PROD': '生产环境'}[updateVersionDraft.hostEnv])"></span></form-input-container>
        </form-config-item>
        <form-config-item config-title="所在主机" required="required">
          <form-input-container help-text="主机数量与启动实例个数相同">
            <form-multiple-select-list ng-model="updateVersionDraft.nodeDraft" name="updateNodeList" parameters="{clusterId:loadBalanceDraft.clusterId,hostEnv:updateVersionDraft.hostEnv}" form-name="updateNginxLBVersion" placeholder="请选择主机" loading-text="正在获取主机" empty-text="无相关信息" error-message="主机不能为空" get-list-fn="{{'nodeByLabels'}}"></form-multiple-select-list>
          </form-input-container>
        </form-config-item>
        <form-config-item config-title="监听端口" required="required">
          <form-input-container>
            <input type="number" ng-model="updateVersionDraft.listenPort" min="1" max="65535" required="required"/>
          </form-input-container>
        </form-config-item>
        <form-config-item config-title="定制镜像">
          <form-input-container><span ng-bind="updateVersionDraft.registry + '/'"></span><span ng-bind="updateVersionDraft.image + ':'"></span><span ng-bind="updateVersionDraft.tag"></span>
            <icon-edit tooltip="编辑" ng-click="userDefinedImage()"></icon-edit>
          </form-input-container>
        </form-config-item>
        <form-config-item config-title="资源限额" required="required">
          <form-input-container><span style="margin-right: 20px;"><span>CPU(个)</span>
              <input ng-model="updateVersionDraft.cpu" type="number" step="0.1" min="0" name="cpu" required="required" ng-pattern="/^(([0-9]+.[0-9]*[0-9][0-9]*)|([0-9]*[0-9][0-9]*.[0-9]+)|([0-9]*[0-9][0-9]*))$/"/></span><span style="margin-right: 20px;"><span>内存(MB)</span>
              <input ng-model="updateVersionDraft.mem" type="number" min="0" name="memory" required="required" ng-pattern="/^[0-9]\d*$/"/></span></form-input-container>
        </form-config-item>
        <form-config-item config-title="日志存储" required="required">
          <form-input-container help-text="{{ logStoragePrompt[updateVersionDraft.volumeDraft.volumeType] }}">
            <form-multiple-inline>
              <form-multiple-inline-item style="flex: 1; margin:0 6px 0 0;">
                <form-select ng-model="updateVersionDraft.volumeDraft.volumeType" name="relateDeployment" options="[{value: 'EMPTYDIR', text: '不存储日志'}, {value: 'HOSTPATH', text: '主机目录'}]" show-search-input="never" placeholder="请选择类型" empty-text="无相关信息" required="true"></form-select>
              </form-multiple-inline-item>
              <form-multiple-inline-item style="flex: 2;">
                <input ng-if="updateVersionDraft.volumeDraft.volumeType === 'HOSTPATH'" type="text" ng-model="updateVersionDraft.volumeDraft.hostPath" name="hostPath" placeholder="主机内路径"/>
              </form-multiple-inline-item>
            </form-multiple-inline>
          </form-input-container>
        </form-config-item>
        <form-config-item config-title="负载策略" required="required">
          <form-input-container>
            <form-input-radio-group ng-model="updateVersionDraft.lbMethod" name="updateLbMethod" options="[{value: 'ROUNDROBIN', text: 'round_robin'}, {value: 'IPHASH', text: 'ip_hash'}, {value: 'LEASTCONN', text: 'least_conn'}]" required="required" fallback-value="'ROUNDROBIN'"></form-input-radio-group>
          </form-input-container>
        </form-config-item>
        <form-config-item ng-if="hasUpdatePermission">
          <form-input-container>
            <form-submit-button form="updateNginxLBVersion" on-submit="createVersion()">保存升级设置</form-submit-button>
          </form-input-container>
        </form-config-item>
      </form-config-group>
    </form-container>
  </form>
</script>
<script type="text/ng-template" id="instance.html">
  <div ng-controller="NginxInstanceCtr" style="margin: 20px;">
    <table class="ui-table-dome">
      <thead>
        <tr>
          <th>实例名称</th>
          <th>所在主机</th>
          <th>当前版本</th>
          <th>启动时间</th>
          <th>实例状态</th>
          <th>日志</th>
          <th>容器控制台</th>
          <th>监控</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-if="!instanceList || instanceList.length===0">
          <td colspan="9">无实例信息</td>
        </tr>
        <tr ng-repeat="instance in instanceList">
          <td ng-bind="instance.instanceName"></td>
          <td ng-bind="instance.hostIp"></td>
          <td ng-bind="'version' + instance.versionId"></td>
          <td ng-bind="instance.startTime | time"></td>
          <td ng-bind="instance.status"></td>
          <td><a class="link-safe" ng-click="showLog(instance)">查看</a></td>
          <td><a class="link-safe" ng-click="toConsole($index)">进入</a></td>
          <td><a class="link-safe" ng-click="showMonitor(instance)">查看</a></td>
          <td><a ng-class="{true: 'link-safe', false: 'a-disable'}[instance.status !== 'Terminating' &amp;&amp; instance.status !== 'Pending' &amp;&amp; instance.status !== 'ContainerCreating']" ng-click="restartInstance(instance)">重启</a></td>
        </tr>
      </tbody>
    </table>
    <!-- ng-click not working-->
    <!--form-container-->
    <!--  button(type="button" ng-click="showLog()") 查看-->
    <!--  form-table(-->
    <!--  ng-model="instanceList"-->
    <!--  template="loadBalanceInstanceTable"-->
    <!--  columns=`[-->
    <!--    { text: '实例名称', key: 'instanceName' },-->
    <!--    { text: '所在主机', key: 'hostName' },-->
    <!--    { text: '部署版本', key: 'versionId' },-->
    <!--    { text: '启动时间', key: 'startTime' },-->
    <!--    { text: '实例状态', key: 'status' },-->
    <!--    { text: '日志', key: 'log' },-->
    <!--    { text: '容器控制台', key: 'console' },-->
    <!--    ]`-->
    <!--  empty-text="{{isLoadingInstance ? '正在获取列表，请稍候' : (searchText ? '无匹配信息' : '无信息') }}"-->
    <!--  )-->
    <!--  script(type="text/ng-template" id="loadBalanceInstanceTable")-->
    <!--    div(ng-if="column.key === 'instanceName'" ng-bind="value")-->
    <!--    div(ng-if="column.key === 'hostName'" ng-bind="value")-->
    <!--    div(ng-if="column.key === 'versionId'" ng-bind="'version' + value")-->
    <!--    div(ng-if="column.key === 'startTime'" ng-bind="value | time ")-->
    <!--    div(ng-if="column.key === 'status'" ng-bind="value")-->
    <!--    div(ng-if="column.key === 'log'")-->
    <!--      a.link-safe(ng-click="showLog()") 查看-->
    <!--    div(ng-if="column.key === 'console'")-->
    <!--      a.link-safe(ng-click="toConsole($index)") 进入-->
  </div>
</script>
<script type="text/ng-template" id="event.html">
  <ng-controller ng-controller="NginxEventCtr">
    <div class="deploy-detail">
      <div class="events-con">
        <ul class="events-list">
          <li class="event-success" ng-if="eventList.length===0">无事件信息</li>
          <li ng-repeat="event in eventList" ng-class="{'START':'event-building','PROCESSING':'event-building','SUCCESS':'event-success','FAILED':'event-failed','KUBERNETES':'event-system','ABORTED':'event-system','null':'event-system','undefined':'event-system'}[event.eventStatus]"><span class="icon-dot"><i class="dot-line"></i></span><span class="event-name" ng-bind="event.operation | eventOperation"></span><span class="event-result" ng-bind="event.eventStatus | eventStatus"></span><span class="event-date" ng-bind="event.startTime| time"></span><span class="event-author" ng-cloak="ng-cloak"><i class="icon-user" tooltip="操作者"></i>{{event.userName}}</span><span class="event-process" ng-if="event.operation!='KUBERNETES'"><span class="event-process-item" tooltip="起始状态" tooltip-placement="left"><i class="icon-process-dot start"></i>
                <div class="event-process-detail"><span class="sig-event-process" ng-bind="'无状态'+' , '+'0实例'" ng-if="!event.primarySnapshot.length"></span><span class="sig-event-process" ng-repeat="status in event.primarySnapshot" ng-bind="'version'+status.version+' , '+status.replicas+'实例'"></span></div></span><span class="event-process-item" tooltip="目标状态" tooltip-placement="left"><i class="icon-process-dot origin"></i>
                <div class="event-process-detail"><span class="sig-event-process" ng-bind="'无状态'+' , '+'0实例'" ng-if="!event.targetSnapshot.length"></span><span class="sig-event-process" ng-repeat="status in event.targetSnapshot" ng-bind="'version'+status.version+' , '+status.replicas+'实例'"></span></div></span><span class="event-process-item" tooltip="完成状态" tooltip-placement="left"><i class="icon-process-dot current"></i>
                <div class="event-process-detail"><span class="sig-event-process" ng-bind="'无状态'+' , '+'0实例'" ng-if="!event.currentSnapshot.length"></span><span class="sig-event-process" ng-repeat="status in event.currentSnapshot" ng-bind="'version'+status.version+' , '+status.replicas+'实例'"></span></div></span></span><span class="event-process tool-nowrap" ng-if="event.operation=='KUBERNETES'" ng-bind="event.message" hoverable-popover="hoverable-popover" content="event.message"></span>
            <!--span.txt-warning.event-info(ng-show="event.eventStatus=='FAILED'" popover="{{event.message}}" popover-trigger="click" tooltip="点击打开/关闭" tooltip-placement="left") 错误信息--><span class="txt-warning event-info" ng-show="event.eventStatus=='FAILED'" tooltip="点击打开/关闭" tooltip-placement="left" style="position:relative;user-select:none;" ng-click="showWrong(event.eid)">错误信息
              <div class="popover top toggle" ng-show="event.eventStatus=='FAILED' &amp;&amp; wrongMessageList[event.eid]" ng-class="animation">
                <div class="arrow"></div>
                <div class="popover-inner">
                  <div class="popover-content" ng-bind="event.message"></div>
                </div>
              </div></span>
          </li>
        </ul>
      </div>
    </div>
  </ng-controller>
</script>